import React from 'react';
import { View, Text, StyleSheet, ScrollView } from 'react-native';
import { LanguageSelector } from '@/app/components/LanguageSelector';
import { useTranslation } from '@/app/utils/useTranslation';
import Headers from '@/app/components/header/Headers'
export default function LanguageSettingsPage() {
  const { t } = useTranslation();

  return (
     <View style={{ flex: 1, position: 'relative',flexDirection:'column' }}>
        <Headers title={t('settings.language')} leftIcon={require('@/assets/images/icon/back.png')} backgroundColor={'rgba(0,0,0,0)'} barStyle={0} />
        <ScrollView style={styles.scrollView}>
          <View style={styles.header}>
            {/* <Text style={styles.title}>{t('settings.language')}</Text> */}
            <Text style={styles.subtitle}>
              {t('settings.changeLanguageConfirm')}
            </Text>
          </View>

          <LanguageSelector style={styles.languageSelector} />

          <View style={styles.infoSection}>
            <Text style={styles.infoTitle}>{t('common.info')}</Text>
            <Text style={styles.infoText}>
              语言更改后，应用将立即切换到新语言。某些系统级别的文本可能需要重启应用才能完全生效。
            </Text>
            <Text style={styles.infoText}>
              After changing the language, the app will immediately switch to the new language. Some system-level text may require restarting the app to take full effect.
            </Text>
          </View>
        </ScrollView>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
  scrollView: {
    flex: 1,
  },
  header: {
    padding: 20,
    // borderBottomWidth: 1,
    // borderBottomColor: '#e0e0e0',
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    color: '#333',
    marginBottom: 8,
  },
  subtitle: {
    fontSize: 16,
    color: '#666',
  },
  languageSelector: {
    // margin: 20,
  },
  infoSection: {
    margin: 20,
    padding: 16,
    backgroundColor: '#f5f5f5',
    borderRadius: 8,
  },
  infoTitle: {
    fontSize: 16,
    fontWeight: '600',
    color: '#333',
    marginBottom: 8,
  },
  infoText: {
    fontSize: 14,
    color: '#666',
    lineHeight: 20,
    marginBottom: 8,
  },
});